<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
    />
    <title>Vant CDN Demo</title>

    <!-- 引入样式文件 -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/vant@4/lib/index.css"
    />

    <!-- 自定义样式 -->
    <style>
      body {
        color: #333;
        background-color: #f8f8f8;
      }

      .goods {
        padding-bottom: 50px;
      }

      .goods-swipe img {
        width: 100%;
        display: block;
      }

      .goods-title {
        font-size: 16px;
      }

      .goods-price {
        color: #f44;
      }

      .goods-express {
        font-size: 12px;
        padding: 5px 15px;
      }

      .goods-cell-group {
        margin: 15px 0;
      }

      .goods-tag {
        margin-left: 5px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <!-- 模板 -->
      <div class="goods">
        <van-swipe class="goods-swipe" :autoplay="3000">
          <van-swipe-item v-for="thumb in goods.thumb" :key="thumb">
            <img :src="thumb" />
          </van-swipe-item>
        </van-swipe>

        <van-cell-group>
          <van-cell>
            <template #title>
              <div class="goods-title">{{ goods.title }}</div>
              <div class="goods-price">{{ formatPrice(goods.price) }}</div>
            </template>
          </van-cell>
          <van-cell class="goods-express">
            <template #title>
              <van-col span="10">运费：{{ goods.express }}</van-col>
              <van-col span="14">剩余：{{ goods.remain }}</van-col>
            </template>
          </van-cell>
        </van-cell-group>

        <van-cell-group class="goods-cell-group">
          <van-cell value="进入店铺" icon="shop-o" is-link @click="enterShop">
            <template #title>
              <span class="van-cell-text">有赞的店</span>
              <van-tag class="goods-tag" type="danger">官方</van-tag>
            </template>
          </van-cell>
          <van-cell title="查看商品详情" is-link @click="showGoodsDetail" />
        </van-cell-group>

        <van-action-bar>
          <van-action-bar-icon icon="chat-o" @click="showChat">
            客服
          </van-action-bar-icon>
          <van-action-bar-icon icon="cart-o" @click="showCart">
            购物车
          </van-action-bar-icon>
          <van-action-bar-button type="warning" @click="addCart">
            加入购物车
          </van-action-bar-button>
          <van-action-bar-button type="danger" @click="buy">
            立即购买
          </van-action-bar-button>
        </van-action-bar>
      </div>
    </div>

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>

    <script>
      // 初始化 Vue 实例
      const app = Vue.createApp({
        data() {
          return {
            goods: {
              title: "美国伽力果（约680g/3个）",
              price: 2680,
              express: "免运费",
              remain: 19,
              thumb: [
                "https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg",
                "https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg",
              ],
            },
          };
        },

        methods: {
          formatPrice() {
            return "¥" + (this.goods.price / 100).toFixed(2);
          },

          enterShop() {
            vant.Toast("进入店铺");
          },

          showGoodsDetail() {
            vant.Toast("查看商品详情");
          },

          showChat() {
            vant.Toast("进入客服页面");
          },

          showCart() {
            vant.Toast("进入购物车页面");
          },

          addCart() {
            vant.Toast("加入购物车");
          },

          buy() {
            vant.Toast("立即购买");
          },
        },
      });

      app.use(vant);
      app.mount("#app");
    </script>
  </body>
</html>
